<template>
  <div class="system-data-container">
    <div class="header">
      <h2>系统数据统计</h2>
      <el-button type="primary" size="small" @click="refreshData" icon="el-icon-refresh">刷新数据</el-button>
    </div>
    <div class="content">
      <div id="chart" class="chart-wrapper"></div>
      <div class="data-cards">
        <el-row :gutter="12">
          <el-col :span="8" v-for="(item, index) in dataCards" :key="index">
            <el-card shadow="hover" :body-style="{ padding: '12px' }">
              <div class="data-card">
                <div class="icon-wrapper" :style="{ backgroundColor: item.color }">
                  <i :class="item.icon"></i>
                </div>
                <div class="data-info">
                  <div class="data-title">{{ item.title }}</div>
                  <div class="data-value">{{ item.value }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SystemData",
  data() {
    return {
      sysData: [],
      dataCards: [
        { title: '讲师总数', value: 0, icon: 'el-icon-user', color: '#409EFF' },
        { title: '学生总数', value: 0, icon: 'el-icon-user-solid', color: '#67C23A' },
        { title: '班级总数', value: 0, icon: 'el-icon-s-custom', color: '#E6A23C' },
        { title: '教室总数', value: 0, icon: 'el-icon-office-building', color: '#F56C6C' },
        { title: '教学楼总数', value: 0, icon: 'el-icon-school', color: '#909399' },
        { title: '教材总数', value: 0, icon: 'el-icon-notebook-1', color: '#9B59B6' },
        { title: '排课任务', value: 0, icon: 'el-icon-s-order', color: '#16A085' },
        { title: '新增学生', value: 0, icon: 'el-icon-user', color: '#3498DB' },
        { title: '新增讲师', value: 0, icon: 'el-icon-user', color: '#E74C3C' }
      ]
    };
  },

  mounted() {
    this.systemData();
    window.addEventListener('resize', this.handleResize);
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    refreshData() {
      this.systemData();
      this.$message.success('数据已更新');
    },

    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },

    systemData() {
      this.$axios
        .get("http://localhost:8080/systemdata")
        .then((res) => {
          if (res.data.code == 0) {
            let ret = res.data.data;
            this.sysData = ret;
            this.updateDataCards();
            this.draw();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          this.$message.error('获取数据失败');
        });
    },

    updateDataCards() {
      this.dataCards[0].value = this.sysData.teachers;
      this.dataCards[1].value = this.sysData.students;
      this.dataCards[2].value = this.sysData.classes;
      this.dataCards[3].value = this.sysData.classrooms;
      this.dataCards[4].value = this.sysData.teachbuilds;
      this.dataCards[5].value = this.sysData.courses;
      this.dataCards[6].value = this.sysData.classtasks;
      this.dataCards[7].value = this.sysData.studentReg;
      this.dataCards[8].value = this.sysData.teacherReg;
    },

    draw() {
      this.chart = this.$echarts.init(document.getElementById("chart"));

      const option = {
        title: { 
          text: "系统数据统计",
          left: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true
        },
        xAxis: [{
            type: "category",
          data: this.dataCards.map(card => card.title),
            axisTick: {
            alignWithLabel: true
            },
          axisLabel: {
            interval: 0,
            rotate: 0,
            textStyle: {
              fontSize: 12
            }
          }
        }],
        yAxis: [{
            type: "value",
          name: "数量",
          nameTextStyle: {
            padding: [0, 0, 0, 40]
          }
        }],
        series: [{
          name: "数量",
            type: "bar",
            barWidth: "60%",
          data: this.dataCards.map(card => card.value),
          itemStyle: {
            color: function(params) {
              return this.dataCards[params.dataIndex].color;
            }.bind(this)
          },
          label: {
            show: true,
            position: 'top',
            formatter: '{c}'
          }
        }]
      };

      this.chart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.system-data-container {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
  margin: 0;
      color: #303133;
      font-weight: 500;
    }
  }

  .content {
    .chart-wrapper {
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      height: 450px;
      margin-bottom: 12px;
    }

    .data-cards {
      .el-card {
        margin-bottom: 12px;
      }

      .data-card {
        display: flex;
        align-items: center;
        height: 100%;

        .icon-wrapper {
          width: 40px;
          height: 40px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          flex-shrink: 0;

          i {
            font-size: 20px;
            color: #fff;
          }
        }

        .data-info {
          flex: 1;
          min-width: 0;

          .data-title {
            font-size: 13px;
            color: #909399;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .data-value {
            font-size: 20px;
            color: #303133;
            font-weight: 500;
            line-height: 1.2;
          }
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .system-data-container {
    .content {
      .data-cards {
        .el-col {
          width: 50%;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .system-data-container {
    .content {
      .data-cards {
        .el-col {
          width: 100%;
        }
      }
    }
  }
}
</style>
